<template>
  <div class="">
    <el-button type="primary" @click="goSelImgs">选择插入图片</el-button>

    <Tinymce ref="tin" v-model="content" />
    <el-button type="primary" @click="getTin">获取tin内容</el-button>
    <el-button type="primary" @click="setTin">赋值</el-button>
    <hr>
    <MarkdownEditor ref="md" />
    <el-button type="primary" @click="getMd">获取md内容</el-button>
    <el-button type="primary" @click="setMd">赋值</el-button>

    <el-dialog
      title="图片列表"
      :visible.sync="dialog"
      width="70%"
      @close="handleClose"
    >
      图片列表
      <Imgs />

      <span slot="footer">
        <el-button @click=" dialog = false">取 消</el-button>
        <el-button type="primary" @click="doSave">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce'
import MarkdownEditor from '@/components/MarkdownEditor'
import Imgs from './imgs/index'
export default {
  components: {
    Tinymce,
    Imgs,
    MarkdownEditor
  },
  data() {
    return {
      dialog: false,
      content: '<p>测试</p>'
    }
  },
  computed: {

  },
  created() {

  },
  mounted() {

  },
  methods: {
    getTin() {
      var str = this.$refs.tin.getContent()
      console.log(this.content)
      console.log(str)
    },
    setTin() {
      // ajax获取过来的
      var str = '<p>今天天气<span style="background-color: #ff0000;">不错</span></p>'
      this.$refs.tin.setContent(str)
    },
    setMd() {
      this.$refs.md.setValue('# 第一章')
    },
    getMd() {
      var rs = this.$refs.md.getValue()
      var htmlRs = this.$refs.md.getHtml()
      console.log('md value==>', rs)
      console.log('md html==>', htmlRs)
    },
    goSelImgs() {
      this.dialog = true
    },
    handleClose() {
      this.dialog = false
    },
    doSave() {

    }
  }
}
</script>

<style scoped lang="scss">

</style>
